
  
  <template>
  <el-card class="pageScroll">
    <template #header>
      <div class="card-header flex">
        <div class="flex1">全国机构数据</div>
      </div>
    </template>
    <el-form
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="机构名称" prop="organizationId">
        <ApiSelect
          v-model="queryParams.organizationId"
          clearable
          class="!w-240px"
          apiName="organization"
        ></ApiSelect>
      </el-form-item>
      <el-form-item label="日期范围" prop="time">
        <el-date-picker
          v-model="queryParams.time"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
        <el-button type="success" plain @click="onExport()"> 导出 </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" :loading="loading">
      <!-- <el-table-column label="序号" align="center" prop="id" width="60px" /> -->
      <el-table-column label="所属省份" align="center" prop="provinceName">
      </el-table-column>
      <el-table-column label="所属市" align="center" prop="cityName">
      </el-table-column>
      <el-table-column label="所属区县" align="center" prop="areaName">
      </el-table-column>
      <el-table-column label="机构名称" align="center" prop="organizationName">
      </el-table-column>
      <el-table-column label="拥有学生数" align="center" prop="hasPersons">
        <template #default="scope"> {{ scope.row.hasPersons }}人 </template>
      </el-table-column>
      <el-table-column label="任务申报次数" align="center" prop="declareNum">
        <template #default="scope"> {{ scope.row.declareNum }}次 </template>
      </el-table-column>
      <el-table-column
        label="完成任务总人数"
        align="center"
        prop="completedPersons"
      >
        <template #default="scope">
          {{ scope.row.completedPersons }}人
        </template>
      </el-table-column>
      <el-table-column label="累积总绿色时长" align="center" prop="duration">
        <template #default="scope"> {{ scope.row.duration }}h </template>
      </el-table-column>
      <el-table-column label="累积销售额" align="center" prop="priceTotal">
        <template #default="scope">{{ toPrice(scope.row.priceTotal) }} </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination :="pagination" class="padding10" />
  </el-card>
</template>
  
<script setup lang="ts">
import API from '@/api/api';
import { CONST_VALUE } from '@/utils/const';
import { useTablePage } from '@/hooks/useTablePage';
import { download } from '@/utils/download';
import dayjs from 'dayjs';
import { transformTime1 } from '@/utils/transformTime';
import { toPrice } from '@/utils';

const router = useRouter();
const {
  queryParams,
  queryFormRef,
  loading,
  total,
  list,
  handleQuery,
  resetQuery,
  handleDelete,
  pagination,
  exportHandle,
} = useTablePage({
  queryApi: API.orgStatisticsController.list,
  exportApi: API.orgStatisticsController.export,
  transformQueryParams: transformTime1,
});

function toEditPage(id?: number) {
  router.push({
    name: 'editEcology',
    query: {
      id,
    },
  });
}
function onExport() {
  exportHandle({
    fileName: '全国机构数据',
  });
}
</script>